<template>
    <el-container class="box">
      <el-header>管理系统</el-header>
      <el-container>
        <el-aside width="200px">
            <el-menu :default-active="active" :router="true">
                <el-sub-menu index="1">
                    <template #title >管理系统</template>
                    <el-menu-item index="/mainpage/infor">信息首页</el-menu-item>
                    <el-menu-item index="/mainpage/password" >密码管理</el-menu-item>
                    <el-menu-item index="/mainpage/role">角色管理</el-menu-item>
                    <el-menu-item index="/mainpage/system">系统管理</el-menu-item>
                    
                </el-sub-menu>
                <el-menu-item >
                    <el-menu-item index="/mainpage/custom">客户管理</el-menu-item>
                </el-menu-item>
                <el-menu-item >
                    <el-menu-item index="/mainpage/contract">合同管理</el-menu-item>
                </el-menu-item>
                <el-menu-item >
                    <el-menu-item index="/mainpage/data">数据展示</el-menu-item>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import {ref} from "vue"

const route=useRoute();
const active =ref("");
active.value=route.path;
</script>

<style scoped>
.box{
    /* vw vh 屏幕比例 */
    width: 100vw;
    height: 100vh;
}
.el-header{
   background-color: rgb(2, 2, 2);
    line-height: 60px;
    color: #fff;

}
.el-aside{
    background-color: black;
    --el-menu-bg-color:black;
    --el-menu-active-color: #c1e63c;
    --el-menu-text-color: #f5f6f8;
    --el-menu-hover-bg-color: rgba(36, 217, 196, 0.685);
    --el-menu-border-color: #000000;
}
</style>